<template>
    <div class="cardComponent">
        <el-card
            class="myCardComponent"
            v-loading.lock="isLoadings"
            element-loading-background="rgba(250, 250, 250, 0.7)"
        >
            <div slot="headerss" class="clearfix cardHeader">
                <span>{{ pageTitle }}</span>
                <el-button
                    class="closeButton"
                    v-if="buttonShow"
                    type="text"
                    @click="handleClose"
                >关 闭</el-button>
            </div>
            <slot name="cardBody"></slot>
        </el-card>
    </div>
</template>
<script>
import { closePage } from '@/utils/Common';

export default {
    name: 'cardComponent',
    props: {
        // 页面标题文字
        pageTitle: {
            type: String,
            default: '',
        },
        buttonShow: {
            type: Boolean,
            default: true,
        },
        isLoadings: {
            type: Boolean,
            default: false,
        }
    },

    methods: {
        // 关闭当前页面
        handleClose() {
            closePage(this.$route, this, 1);
        },
    },
};
</script>
<style lang="scss">
.cardComponent {
    .myCardComponent {
        border: none !important;
        margin-bottom: 30px;
        & > .el-card__header {
            padding: 8px !important;
            text-align: left;
        }

        & > .el-card__body {
            min-height: 100%;
        }
        .cardHeader {
            overflow: hidden;
            font-size: 16px;
            line-height: 16px;

            .closeButton {
                padding: 0 !important;
                margin-right: 20px;
                float: right;
                color: #fff;
            }
        }
    }
}
</style>
